<script setup>
import { ref, onMounted, computed } from 'vue'
import LogoImg from '@/assets/img/1.png'
import { useRoute } from 'vue-router'
import { oneLogApi } from '@/commons/api'
import Loader from '@/components/loader/Loader'
import Msg from '@/components/message'

// 定义是否显示加载中的变量
let loadShow = ref(false)

// 加载后调用监听滚动
onMounted(() => {
  checkInfo()
})

let logId
const checkInfo = () => {
  logId = useRoute().params.logId
  if(!logId || logId === '' || logId.length !== 21) {
    Msg({ kind: 'error', txt: '请求参数不正确，请重新访问～！' })
    return
  }
  oneExam()
}

const logRef = ref({})
const oneExam = async () => {
  const res = await oneLogApi({ logId })
  if(res.code === '1000') {
    logRef.value = res.data
    let m = 1
    logRef.value.qstList.forEach(cur => {
      cur.qstNo = cur.kind===6 ? m : cur.qstNo
      let n = 1
      cur.score = 0
      cur.optList.forEach(opt => {
        opt.optNo = cur.kind===6 ? m + '.' + n : opt.optNo
        n++
        if(opt.score > 0) {
          cur.score = opt.score
        }
      })
      m++
      const imgNames = cur.fileNames ? cur.fileNames.split(',') : []
      const imgUrls = cur.fileUrls ? cur.fileUrls.split(',') : []
      cur.imgList = []
      for(let i=0; i<imgNames.length; i++) {
        cur.imgList.push({ name: imgNames[i], url: imgUrls[i] })
      }
    })
  } else {
    Msg({ kind: 'error', txt: '对不起，没有查到您的答题记录，请联系管理员！' })
  }
}

const fmtKind = computed(() =>{
  return (kind) => {
    switch (kind) {
      case 1:
        return '单选题'
      case 2:
        return '判断题'
      case 3:
        return '多选题'
      case 4:
        return '填空题'
      case 5:
        return '简答题'
      case 6:
        return '实操题'
      default:
        return '其它'
    }
  }
})

const picShow = ref(false)
const imgRef = ref({ name: '', url: '' })
const showPic = (name, url) => {
  imgRef.value.name = name
  imgRef.value.url = url
  picShow.value = true
}
</script>

<template>
  <div class="exam-a">
    <div class="exam-b">
      <div class="exam-c"><img :src="LogoImg" class="w100" alt="logo" /></div>
      <div class="exam-d"></div>
    </div>
    <div class="test-e">
      <div class="exams-f">
        <div class="exam-g">{{ logRef.title }}</div>
        <div class="exam-h txt-center">时长：{{ logRef.examTime }}分钟 总分：{{ logRef.score }}分 得分：{{ logRef.myScore }}分</div>
      </div>
      <div class="test-f" v-for="(qst, index) in logRef.qstList" :key="qst.qstId">
        <div class="test-g">{{ index + 1 }}. 【{{ fmtKind(qst.kind) }}】{{ qst.title }}({{ qst.keywords }})({{ qst.score }}分)</div>
        <div class="test-h" v-if="qst.imgList && qst.imgList.length>0">
          <div class="test-i mr15" v-for="img in qst.imgList" @click="showPic(img.name, img.url)"><img :alt="img.name" v-lazy="img.url" class="test-j" /></div>
        </div>
        <div v-if="qst.kind===1 || qst.kind===2 || qst.kind===3">
          <div :class="['qst-i', opt.myAnswer && opt.myAnswer.indexOf(opt.optId)!==-1 ? 'color-p' : '']" v-for="opt in qst.optList" :key="opt.optId">{{ opt.optNo }}. {{ opt.optName }}</div>
        </div>
        <div v-if="qst.kind===5">
          <div class="test-k" v-for="opt in qst.optList" :key="opt.optId">
            <div class="test-g">{{ opt.optNo }}. {{ opt.optName }}（{{ opt.score }}分）</div>
            <div class="test-k qst-i">{{ opt.myAnswer }}</div>
            <div class="test-k qst-i">{{ opt.myKey }}</div>
          </div>
        </div>
        <div v-if="qst.kind===6">
          <div class="test-k" v-for="opt in qst.optList" :key="opt.optId">
            <div class="log-k">{{ opt.optNo }}.1. 风险点</div>
            <div class="log-l">{{ opt.fxd }}</div>
            <div class="log-l" v-if="opt.fxdKey">命中关键词：<span class="tag-p mr15" v-for="key in opt.fxdKey.split('@-@')" :key="key">{{ key }}</span></div>
            <div class="log-k">{{ opt.optNo }}.2. 事故类型</div>
            <div class="log-l">{{ opt.sglx }}</div>
            <div class="log-l" v-if="opt.sglxKey">命中关键词：<span class="tag-p mr15" v-for="key in opt.sglxKey.split('@-@')" :key="key">{{ key }}</span></div>
            <div class="log-k">{{ opt.optNo }}.3. 防范措施</div>
            <div class="log-l">{{ opt.ffcs }}</div>
            <div class="log-l" v-if="opt.ffcsKey">命中关键词：<span class="tag-p mr15" v-for="key in opt.ffcsKey.split('@-@')" :key="key">{{ key }}</span></div>
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model:show="picShow" closeable><img :alt="imgRef.name" v-lazy="imgRef.url" class="w100" /></van-popup>
    <loader :loadShow="loadShow" />
  </div>
</template>

<style scoped>
.exam-a {width: 100%; height: 100%; overflow: hidden;}
.exam-b {width: 100%; display: -webkit-flex; display: flex; align-items: center; border-bottom: 1px solid #f0f0f0;}
.exam-c {width: 2.5rem; height: 2.5rem; padding: 0.5rem 0 0.5rem 1.5rem;}
.exam-d {flex-grow: 1; font-size: 1.3rem; color: #333; text-align: center;}
.exams-f {margin: 0.5rem; background-color: #FFF; box-shadow: 1px 1px 3px #CCC;}
.exam-g {padding: 2rem 1rem; text-align: center; font-size: 1.6rem;}
.exam-h {padding: 0.5rem 0; text-align: center; font-size: 0.9rem; color: #666; border-bottom: 1px solid #f0f0f0;}
.test-e {height: calc(100% - 6.5rem); background-color: #f2f2f2; overflow: auto;}
.test-f {padding: 1rem; margin: 0.5rem; background-color: #FFF; box-shadow: 1px 1px 3px #CCC;}
.test-g {line-height: 1.6rem;}
.test-h {display: -webkit-flex; display: flex; padding: 1rem;}
.test-i {width: 90px; height: 90px; overflow: hidden; border: 1px solid #4099FF; border-radius: 4px; text-align: center;}
.test-j {height: 100%;}
.test-k {border-bottom: 1px solid #CCC;}
.qst-i {padding: 0.6rem 0 0.6rem 0.6rem;}
.log-k {color: #18a058;}
.log-l {margin-bottom: 0.6rem;}
</style>